<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="order-date">
          <input type="text" v-model="searchDate" placeholder="请输入查询日期" readonly @click="showDate">
          &nbsp;
          <van-button type="primary" v-show="searchDate" size="small" @click="resetDate">重置</van-button>
        </div>
        <div class="order-item" v-for="item in list" @click="goDetail(item)">
          <div class="order-row">
            <div class="order-el order-station"><img src="../assets/img/i4.png" height="20px">{{item.dName}}</div>
            <div class="order-el order-status" v-bind:class="getOrderStatusClass(item)">
              {{getOrderStatus(item)}}
            </div>
          </div>
          <div class="order-row order-product">
            <!-- <div class="order-el order-img" v-bind:style="{backgroundImage: 'url(' + item.stationIcon + ')'}"></div> -->
            <div class="order-el order-info">
              <div class="order-info__item">
                订单号：{{item.id}}
              </div>
              <div class="order-info__item">
                下单时间：{{item.time}}
              </div>
              <div class="order-info__item order-info__item_paytype" v-show="item.paytype !== true">
                {{(!item.paytype && item.payStatus) ? '未支付' : '已支付'}}&nbsp;<span style="">{{item.total.toFixed(2) || 0}}&nbsp;</span>元
              </div>
              <div class="order-info__item order-info__item_paytype">
                支付方式：<span :style="{color: item.state == 3 ? '#f00' : (item.paytype ? '#f3d921' : 'rgb(38, 162, 255)')}">{{item.state == 3 ? '取消付款' : (item.paytype ? '线下支付' : '线上支付')}}</span>
              </div>
              <div class="order-info__item" v-if="item.carrierName !== ''">
                配送员：{{item.carrierName}}&nbsp;&nbsp;&nbsp;{{item.carrierPhone}}
              </div>
              <!-- <div class="order-info__item" v-if="item.carrierName !== ''">
                配送员联系方式：{{item.carrierPhone}}
              </div> -->
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="dateConfirm" @cancel="dateCancel" />
    </van-popup>
  </div>
</template>

<script>
  import {
    CUSTOMER_ORDER_LIST
  } from '@/api/user'
  import {
    ORDER_LIST,
    ORDER_DEL
  } from '@/api/stock';
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['stationInfo'])
    },
    props: {
      state: {
        type: Number
      },
      payStatus: {
        type: Number
      }
    },
    data() {
      return {
        dateShow: false,
        searchDate: '',
        currentDate: new Date(),
        isLoading: false,
        finished: false,
        loading: false,
        addressName: '',
        currPage: 1,
        pageSize: 10,
        list: [],
        num: 4,
      };
    },
    mounted() {
      console.log(this.payStatus)
      this.getList();
    },
    methods: {
      getListBySearch(searchVal) {
        this.addressName = searchVal;
        this.list = [];
        this.currPage = 1;
        this.isLoading = true;
        this.finished = false;
        this.getList();
      },
      resetDate() {
        this.searchDate = '';
        this.list = [];
        this.currPage = 1;
        this.isLoading = true;
        this.finished = false;
        this.getList();
      },
      getList() {
        if (this.stationInfo.id) {
          let params = {
            page: this.currPage,
            rows: this.pageSize,
            stationId: this.stationInfo.id,
            // payStatus: 0
            // stationId: 113,
            // openid: this.stationInfo.openid
          }
          //根据配送状态查询列表
          if (this.state !== undefined) {
            params.state = this.state;
          }
          if(this.searchDate !== ''){
            params.startTime = this.searchDate + ' 00:00:00';
            params.endTime = this.searchDate + ' 23:59:59';
          }
          //根据收货人查询
          if (this.addressName !== '') {
            params.addressName = this.addressName;
          }
          params.payStatus = this.payStatus
          this.$reqPost(CUSTOMER_ORDER_LIST, params).then(res => {
            this.isLoading = false;
            this.loading = false;
            if (res.total == this.list.length) {
              this.finished = true;
            } else {
              this.list.push(...res.rows);
            }
          });
        } else {
          this.$toast('请求失败');
        }
      },
      goDetail(item) {
        this.$router.push({
          name: 'orderDetail',
          query: {
            id: item.id
          }
        })
      },
      onRefresh() {
        this.addressName = '';
        this.list = [];
        this.currPage = 1;
        this.isLoading = true;
        this.finished = false;
        this.getList();
        this.$emit('refresh')
      },
      onLoad() {
        this.loading = true;
        this.currPage++;
        this.getList();
      },
      //付款
      payOrder(item) {
        this.$router.push({
          name: 'stockPay',
          params: {
            orderNo: item.id,
            prepayId: item.prepayId,
            total: item.asum
          }
        });
      },
      //取消订单
      cancel(item) {
        this.$reqGet(ORDER_DEL, {
          orderId: item.id,
          state: 3
        }).then(res => {
          this.$toast.success('取消成功');
          this.onRefresh();
        }).catch(err => {
          this.$toast.fail('取消失败');
        });
      },
      //获取工单状态
      getOrderStatus(item) {
        if (item.state == 3) {
          return '已取消';
        }
        if (!item.paytype) {
          if (item.payStatus) {
            return '待支付'
          }
        }

        if (item.state == 0) {
          return '待配送';
        } else if (item.state == 1) {
          return '配送中';
        } else if (item.state == 2) {
          if (item.evaluation) {
            return '未评价'
          } else {
            return '已完成';
          }
        }
        return '';
      },
      getOrderStatusClass(item) {
        if (item.state == 3) {
          return 'order-info__item__status__cancel';
        }

        if (!item.paytype) {
          if (item.payStatus) {
            return 'order-info__item__status__unpay'
          }
        }

        if (item.state == 0) {
          return 'order-info__item__status__wait';
        } else if (item.state == 1) {
          return 'order-info__item__status__sending';
        } else if (item.state == 2) {
          if (item.evaluation) {
            return 'order-info__item__status__finish'
          } else {
            return 'order-info__item__status__finish';
          }
        }
        return '';
      },
      //显示日期
      showDate(){
        this.dateShow = true;
      },
      dateCancel(){
        this.dateShow = false;
      },
      dateConfirm(){
        this.searchDate = this.currentDate.Format('yyyy-MM-dd');
        this.dateShow = false;
        this.currPage = 1;
        this.list = [];
        this.getList();
      }

    }
  };

</script>

<style lang="less" scoped>
  @import '../styles/variable.less';

  .order-item {
    margin: 0 10px 10px 10px;
    padding: 15px 15px 5px 15px;
    // border-bottom: 1px solid #dddddd;
    font-size: 14px;
    color: #666666;
    background-color: #ffffff;
    border-radius: 8px;

    &:first-child {
      margin-top: 10px;
    }
  }

  .order-date {
    margin: 8px 10px;
    text-align: right;

    input {
      width: 140px;
      font-size: 14px;
      text-align: center;
      color: #666666;
      padding: 6px 0;
      border-radius: 5px;
      border: none;
      outline: none;
      background-color: #ffffff;
    }
  }

  .order-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;

    &.order-sender-content {
      justify-content: flex-end;
      margin-top: 5px;

      button {
        margin-left: 5px;
      }
    }

    &.order-product {
      padding: 5px 0;
      justify-content: unset;
    }
  }

  .order-img {
    flex: 0 0 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('../assets/product.png');
  }

  .order-info {
    display: flex;
    flex-direction: column;
    flex: 1;

    .order-info__item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      color: #999999;
      &.order-info__item_paytype{
        justify-content: unset;
      }
      .order-info__item__name {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .order-info__more {
      color: #999999;
      text-align: right;
    }
  }



  //订单状态
  .order-status {
    &.order-status_cancel {
      color: #999999;
    }

    &.order-status_unpay {
      color: @col-red;
    }

    &.order-status_wait {
      color: @col-yellow;
    }

    &.order-status_sending {
      color: @col-the;
    }
  }

  //订单元素
  .order-el {
    &.order-station {
      color: #333;
      font-size: 16px;

      img {
        position: relative;
        top: 3px;
        margin-right: 10px;
      }
    }

    &.order-total {
      color: @col-the;
    }

    &.order-sender {
      display: flex;
      align-items: center;
    }

    .order-confirm {
      height: 26px;
      line-height: 24px;
      font-size: 12px;
    }

    .order-confirm::after {
      background-color: #dddddd;
    }
  }

</style>
